<template>
    <div>
      <!-- 你原本的顶部栏、左边栏等可以保留在这里 -->
      <MapComponent :pieces="pieces" @update:pieces="updatePieces" />
    </div>
  </template>
  
  <script>
  import MapComponent from '@/components/MapComponent.vue';
  import hoverSound from '@/assets/hover-sound.mp3';
  
  export default {
    components: {
      MapComponent
    },
    data() {
      return {
        pieces: [
          {
            name: '玩家1',
            x: 100,
            y: 100,
            rotation: 0,
            normalImg: require('@/assets/tank-red.png'),
            hoverGif: require('@/assets/tank-red-hover.gif'),
            isHover: false,
            nameColor: '#ff0000'
          },
          {
            name: '玩家2',
            x: 200,
            y: 200,
            rotation: 0,
            normalImg: require('@/assets/tank-blue.png'),
            hoverGif: require('@/assets/tank-blue-hover.gif'),
            isHover: false,
            nameColor: '#0099ff'
          }
        ],
        audio: new Audio(hoverSound)
      };
    },
    mounted() {
      const saved = localStorage.getItem('pieces');
      if (saved) this.pieces = JSON.parse(saved);
    },
    methods: {
      updatePieces(newPieces) {
        this.pieces = newPieces;
        localStorage.setItem('pieces', JSON.stringify(newPieces));
      }
    }
  };
  </script>
  